<template>
  <div class="httpDemo-comp-ct">
  
  <mt-header :title="header_title" fixed>
    <mt-button icon="back" @click="$router.back(-1)" slot="left">返回</mt-button>
  </mt-header>
    <div class="http_respones">{{ret_content}}</div>
    <hr>
    <mt-button size="large" @click="start" v-show="!is_login">login_test</mt-button>
    <mt-button size="large" @click="getlist" v-show="is_login">getlist</mt-button>
    <mt-button type="primary" size="large" @click="gettree" v-show="is_login">gettree</mt-button>
  </div>
</template>
<script>
import Ajax from '@/global/ajaxUtil.js'
export default {
  name: 'httpDemo',
  data(){
    return {
      header_title: 'httpDemo',
      ret_content:'???',
      is_login:false
    }
  },
  methods: {
    start() {
      let api = '/login?username=lws&password=nngdj_12345'
      // let api = '/login'
      Ajax.post(api).then(
      (data)=>{
        // console.log(data);
        this.ret_content = JSON.stringify(data.body)
        if(!this.GLOBAL.serv_token){
          this.GLOBAL.serv_token = data.body.token
          this.is_login = true
          //原打算在此处设置http全局拦截，无奈不生效，只能在预先在main.js做全局拦截设置
          // console.log(this.$http.interceptors.push);
        }
      },(erro)=>{
        console.log('erro');
      })
    },
    getlist(){
      let api = '/projects'
      let param = {
        pageNumber:1,
        pageSize:-1
      }
      Ajax.get(api,param).then((ret)=>{
        this.ret_content = JSON.stringify(ret.body)
      },(erro)=>{
        console.log(erro);
      })

    },
    
    gettree(){
      let api = '/projects/{id}'
      //restfull风格调用 目标path /projects/id
      Ajax.resource(api).get({id:'1c715b309e4545f7a5958ddd868d9a3d'}).then((ret)=>{
        this.ret_content = JSON.stringify(ret.body)
      },(erro)=>{
        console.log(erro);
      })

    }

  },
}
</script>
<style lang="scss" scoped>
.httpDemo-comp-ct {
  .http_respones{
     width: 98%;
     height: 350px;
     border: 1px solid;
     overflow-y: auto;
     text-align: left;
     word-wrap:break-word;
  }
}
</style>
